<script setup lang="ts">
import { defineProps, defineExpose, defineEmits, ref } from 'vue';
import { ElMessage } from 'element-plus';
import EST_ENV from '@/config/env.js';
import httpService from '@/utils/httpService';

const imageUrl = ref('');
const props = defineProps({
  modelValue: {
    type: String,
  },
  width: {
    type: String,
    default: '180px',
  },
  height: {
    type: String,
    default: '180px',
  },
  lineHeight: {
    type: String,
    default: '180px',
  },
  httpUrl: {
    type: String,
  },
});
const uploadRef = ref();
const emit = defineEmits(['update:modelValue']);
//1、上传前校验
const onSelectFile = async obj => {
  const imgType = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/jpg'];
  const isLt5M = obj.raw.size / 1024 / 1024 < 2;
  if (!imgType.includes(obj.raw.type)) {
    return ElMessage.error('请上传正确的图片格式');
  }
  if (!isLt5M) {
    return ElMessage.error('上传的图片太大了');
  }
  debugger;
  const resImg = await httpService.upload(props.httpUrl, {
    filePathPrefix: 'guide',
    file: obj.raw,
  });
  imageUrl.value = EST_ENV.getEnv().ossPath + resImg.data;
  console.log('imageUrl:::', imageUrl);
  emit('update:modelValue', resImg.data);
};

defineExpose({
  onSelectFile,
});
//删除图片
const deleteImg = () => {
  imageUrl.value = '';
  emit('update:modelValue', '');
};
</script>

<template>
  <div class="imgUploadPage">
    <div
      class="imgContent"
      :style="{ width: width, height: height }">
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="onSelectFile"
        ref="uploadRef">
        <img
          v-if="modelValue"
          :src="imageUrl"
          class="avatar"
          :style="{ width: width, height: height }" />
        <el-icon
          v-else
          class="avatar-uploader-icon"
          :style="{ width: width, height: height, 'line-height': lineHeight }">
          <Plus />
        </el-icon>
      </el-upload>
      <div
        v-if="modelValue"
        class="delete"
        @click="deleteImg">
        <el-icon><Close /></el-icon>
      </div>
    </div>
    <slot name="tips"></slot>
  </div>
</template>

<style scoped lang="scss">
.imgUploadPage {
  display: flex;
  flex-direction: column;
}
.imgContent {
  position: relative;

  &:hover .delete {
    display: block;
  }
}
.delete {
  position: absolute;
  display: none;
  width: 20px;
  height: 20px;
  top: -8px;
  right: -8px;
  background-color: #d31145;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
}
.el-icon {
  color: #fff;
  font-weight: 700;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>